<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水务基础图层展示(矢量瓦片)</title>
    <link rel="stylesheet" href="../css/ktol3.css" type="text/css"/>
    <link rel="stylesheet" href="../css/mapPop.css" type="text/css"/>
    <link rel="stylesheet" href="../css/widgets.css"/>
    <link rel="stylesheet" href="../css/pretty.css"/>
    <link rel="stylesheet" href="../css/bootstrap3.3.7.min.css"/>
    <link rel="stylesheet" href="../css/bootstrap-table.min.css"/>
    <script type="text/javascript" src="../js/jquery.min.3.2.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap3.3.7.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-treeview.js"></script>
    <script type="text/javascript" src="../js/ol-debug.js"></script>
    <script type="text/javascript" src="../js/proj4.js"></script>
    <script type="text/javascript" src="../js/olms.js"></script>
    <script type="text/javascript" src="../js/iclient-ol-es6.js"></script>
    <script src="../js/fieldConfig.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
    <script src="../js/turf.min.js"></script>
    <script src="../data/vectorTileLayers.js"></script>
    <script src="../data/yztLayersData.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
        .cesium-viewer .cesium-widget-credits {
            display: none !important;
        }
        .pnl-right {
            position: fixed;
            right: 20px;
            top: 50px;
            width: 385px;
        }

        .pnl-right ul {
            border-bottom: 1px solid #eaeaea;
        }

        .panel-result {
            position: fixed;
            right: 20px;
            top: 215px;
            width: 384px;
        }

        .input-group input {
            height: 100%;
            padding: 7px;
        }

        .margin-top {
            margin-top: 4px;
        }

        .close-btn {
            position: relative;
            float: right;
            cursor: pointer;
        }

        .fixed-table-pagination .pagination-detail,
        .fixed-table-pagination div.pagination {
            margin-top: 0;
            margin-bottom: 2px;
            font-size: 13px;
            padding: 0 8px;
        }

        .fixed-table-pagination .pagination a {
            padding: 6px 11px;
        }

        .fixed-table-pagination div.pagination {
            padding: 0 5px 0 0;
        }

        #layer-panel {
            position: absolute;
            top: 10px;
            left: 10px;
            height: 85%;
            z-index: 100;
            width: 290px;
        }

        .tree-panel {
            height: 100%;
        }

        .tree-panel .tab-pane {
            height: calc(100% - 40px);
        }

        .my-tree {
            height: 100%;
            overflow-y: auto;
        }

        .checkbox-tree .list-group-item {
            position: relative;
            display: block;
            margin-bottom: -1px;
            background-color: #fff;
            border: unset;
            color: #428bca;
            /*padding: 0 4px;*/
            padding: 0;
        }

        .normal-tree .list-group-item {
            position: relative;
            display: block;
            margin-bottom: -1px;
            background-color: #fff;
            color: #428bca;
            padding: 4px;
        }

        #info .info-content {
            max-height: 240px;
            overflow: auto;
        }

        #menu {
            position: absolute;
            z-index: 2;
            padding: 6px 10px;
            right: 20px;
            top: 10px;
            border-radius: 4px;
            -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            background: #fff;
        }

        label {
            margin: 0;
            margin-right: 10px;
        }

        .btn-group button {
            padding: 6px 18px;
        }

        #searchListDiv {
            display: none;
        }

        .tool-btn {
            position: absolute;
            z-index: 2;
            right: 240px;
            top: 12px;
            border-radius: 4px;
            -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            background: #fff;
        }

        #tool-PickBox {
            position: absolute;
            top: 20px;
            left: 40%;
            display: none;
            background-color: #fff;
            padding: 10px;
            box-shadow: 0px 0px 2px #676767;
        }

        #tool-menu {
            display: none;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        @media screen and (max-width: 768px) {
            .tool-btn, #tool-PickBox, #layer-panel, #search-panel, #menu, #tool-PickBox {
                display: none;
            }

            #layer-panel {
                top: 50px;
                left: 10px;
                width: 60%;
                max-width: 345px;
            }

            #tool-PickBox {
                top: 50px;
                left: 10px;
                width: 90%;
                max-width: 345px;
            }

            #tool-PickBox span {
                display: block;
                padding: 4px 0;
                width: 100%;
            }

            #tool-PickBox span input {
                width: 80%;
            }

            #tool-menu {
                display: block;
            }

            .nav > li > a {
                position: relative;
                display: block;
                padding: 10px 4px;
            }

            .pnl-right {
                position: fixed;
                left: 10px;
                top: 50px;
                width: 90%;
                max-width: 345px;
            }

            .panel-result {
                position: fixed;
                left: 10px;
                top: 215px;
                width: 90%;
                max-width: 345px;
            }

            #tbStat {
                height: 250px;
            }

            #tbQuery, #bufferQuery {
                height: 250px;
            }

            .fixed-table-container {
                position: relative;
                clear: both;
                border: 1px solid #ddd;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                height: 250px !important;
            }

            .page-list .btn-group button {
                padding: 0 4px;
            }
        }
    </style>
</head>

<body>
<div id="map" style="width: 100%; height: 100%"></div>
<div class="tool-btn">
    <button type="button" style="background: #fff;padding:6px 16px;border: 0;"
            onclick="onClickPickup()"> 坐标拾取
    </button>
</div>
<div id="tool-PickBox">
    <span>x：<input id="pointX" type="text" value=""/></span>
    <span>y：<input id="pointY" type="text" value=""/></span>
    <button type="button"
            onclick="onPickupClear()"> 关闭
    </button>
</div>
<div id="menu" class="mapboxgl-ctrl">
    <input
            id="image"
            type="radio"
            name="rtoggle"
            value="image"
            checked="checked"
    />影像底图
    <input
            id="dark"
            type="radio"
            name="rtoggle" menu
            value="dark"
    />矢量黑夜底图
</div>
<div id='tool-menu' class='tool-menu'>
    <div id="btnClick" role="group" aria-label="...">
        <button type="button" class="btn btn-default" name="layer-panel" onclick="handleSwitchPanel(0)">图层</button>
        <button type="button" class="btn btn-default" name="search-panel" onclick="handleSwitchPanel(1)">查询分析</button>
        <button type="button" class="btn btn-default" name="tool-PickBox" onclick="handleSwitchPanel(2)">坐标拾取</button>
    </div>
</div>

<div class="panel panel-primary tool-bar" id="layer-panel">
    <ul class="nav nav-pills">
        <li role="presentation" class="active">
            <a href="#themelayers" role="tab" data-toggle="tab">专题图</a>
        </li>
        <li role="presentation">
            <a href="#baselayers" role="tab" data-toggle="tab">底图</a>
        </li>
        <li role="presentation">
            <a href="#yztlayers" role="tab" data-toggle="tab">粤政图</a>
        </li>
    </ul>
    <!-- 面板区 -->
    <div class="tab-content tree-panel">
        <div role="tabpanel" class="tab-pane active" id="themelayers">
            <div id="tree1" class="my-tree checkbox-tree"></div>
        </div>
        <div role="tabpanel" class="tab-pane" id="baselayers">
            <div id="treeBaseLayer" class="my-tree normal-tree"></div>
        </div>
        <div role="tabpanel" class="tab-pane" id="yztlayers">
            <div id="treeYztlayers" class="my-tree checkbox-tree"></div>
        </div>
    </div>
</div>
<div id="info" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="info-content" class="pop-info"></div>
</div>
<div class="panel panel-primary pnl-right" id="search-panel">
    <ul class="nav nav-pills">
        <li role="presentation" class="active" onclick="handleSelect(1)">
            <a href="#stats" role="tab" data-toggle="tab">按类型统计</a>
        </li>
        <li role="presentation" onclick="handleSelect(2)">
            <a href="#query" role="tab" data-toggle="tab">要素查询</a>
        </li>
        <li role="presentation" onclick="handleSelect(3)">
            <a href="#buffer" role="tab" data-toggle="tab">空间分析</a>
        </li>
        <li role="presentation" onclick="handleSelect(4)">
            <a href="#bufferAnalysis" role="tab" data-toggle="tab">缓冲区分析</a>
        </li>
    </ul>
    <!-- 面板区 -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="stats">
            <div style="padding: 8px 15px">
                <div class="input-group" style="margin-top: 5px">
                            <span class="input-group-addon" id="basic-addon1"
                            >关键字</span
                            >
                    <input
                            id="sKeyword"
                            type="text"
                            class="form-control"
                            placeholder="(可为空)"
                            aria-describedby="basic-addon1"
                    />
                </div>
                <input
                        type="button"
                        class="btn btn-default"
                        style="margin: 10px 0"
                        value="统计"
                        onclick="onClickStatistic()"
                />
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="query">
            <div style="padding: 8px 15px">
                <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1"
                            >要素类型</span
                            >
                    <select class="form-control typeList" id="typeList"></select>
                </div>
                <div class="input-group margin-top">
                    <span class="input-group-addon">关键字</span>
                    <input id="qKeyword"
                           type="text"
                           class="form-control"
                           placeholder="(可为空)"
                           aria-describedby="basic-addon1"/>
                </div>
                <input type="button"
                       class="btn btn-default margin-top"
                       value="查询"
                       onclick="onClickQuery()"/>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="buffer">
            <div style="padding: 8px 15px">
                <div class="input-group">
                    <span class="input-group-addon">缓冲距离(km)</span>
                    <input id="distance"
                           type="text"
                           class="form-control"
                           placeholder="(单位：km)"
                           value="2"
                           aria-describedby="basic-addon1"/>
                </div>
                <div class="btn-group margin-top"
                     role="group"
                     aria-label="...">
                    <button
                            id="drawPoint"
                            value="Point"
                            type="button"
                            class="btn btn-default">
                        绘点
                    </button>
                    <button
                            id="drawLine"
                            value="LineString"
                            type="button"
                            class="btn btn-default">
                        绘线
                    </button>
                    <button
                            id="drawPolygon"
                            value="Polygon"
                            type="button"
                            class="btn btn-default"
                    >
                        绘面
                    </button>
                    <button
                            id="clear"
                            value="Clear"
                            type="button"
                            class="btn btn-default"
                    >
                        清除
                    </button>
                </div>
                <input
                        id="bufferback"
                        type="button"
                        class="btn btn-default margin-top"
                        style="display: none"
                        value="返回上一级"
                        onclick="backtoForward()"
                />
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="bufferAnalysis">
            <div style="padding:0px 15px 8px 15px">
                <div id="hcInput" style="margin-top: 10px">
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon2">要素类型</span>
                        <select class="form-control typeList" id="typeList2"></select>
                    </div>
                    <div class="input-group bufferDistanceDiv" style="margin: 6px 0;display: none;">
                        <span class="input-group-addon">缓冲距离(km)</span>
                        <input id="bufferDistance"
                               type="text"
                               class="form-control"
                               placeholder="(单位：km)"
                               value="2"
                               aria-describedby="basic-addon1"/>
                    </div>
                    <div class="input-group" id="searchListDiv">
                        <span class="input-group-addon" id="basic-addon3">查询类型</span>
                        <select class="form-control searchList" id="searchList"></select>
                    </div>
                </div>
                <div style="margin-top: 6px">
                    <button type="button"
                            class="btn btn-default"
                            onclick="searchQuery()">
                        查询
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="panel panel-primary panel-result" style="display: none">
    <div class="panel-heading">
        结果
        <span class="close-btn" onclick="onClickClose('close')"> X </span>
    </div>
    <div class="tbStat" style="display: none">
        <table id="tbStat" class="table"></table>
    </div>
    <div class="tbQuery" style="display: none">
        <table id="tbQuery" class="table"></table>
    </div>
    <div class="bufferQuery" style="display: none">
        <table id="bufferQuery" class="table"></table>
    </div>
</div>
<script type="text/javascript">
    const BASE_LAYERS = {
        image:
            'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201712_20ZW2K/ImageServer/tile/{z}/{y}/{x}',
        dark:
            'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_BLUE_ZW2K/MapServer/tile/{z}/{y}/{x}',
    }

    const REQUEST_STAT = 'http://10.253.190.55:8080/web/search/group'
    const REQUEST_QUERY = 'http://10.253.190.55:8080/web/search/list'
    const REQUEST_DETAIL = 'http://10.253.190.55:8080/web/search/getById'
    const REQUEST_BUFFERCOUNT =
        'http://10.253.190.55:8080/web/search/getSpatialCount'
    const REQUEST_BUFFERDATA =
        'http://10.253.190.55:8080/web/search/getSpatialData'
    var GMAPURL = 'http://10.253.190.56:8080/gmap/proxyHandler?serviceCode={{serviceCode}}&url=https://ztn-data.gdgov.cn:8581/GatewayMsg/http/api/proxy/invoke'


    var baseData = [
        {
            text: '遥感影像',
            nodes: [
                {
                    text: '2019',
                    nodes: [
                        {
                            text: '11月0.2米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201911_20ZW2K/ImageServer',
                            layer: 'SZAVI201911_20ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '0.5米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI2019_50GK2K/ImageServer',
                            layer: 'SZAVI2019_50GK2K',
                            serverType: 'ArcGIS Server',
                        }
                    ]
                },
                {
                    text: '2017',
                    nodes: [
                        {
                            text: '12月0.2米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201712_20ZW2K/ImageServer',
                            layer: 'SZAVI201712_20ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2016',
                    nodes: [
                        {
                            text: '12月0.2米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201612_20ZW2K/ImageServer',
                            layer: 'SZAVI201612_20ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '12月0.5米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201612_50ZW2K/ImageServer',
                            layer: 'SZAVI201612_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '1月0.5米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI20160103_20ZW2K/ImageServer',
                            layer: 'SZAVI20160103_20ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2015',
                    nodes: [
                        {
                            text: '4月0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI201504_50ZW2K/ImageServer',
                            layer: 'SZSRI201504_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2014',
                    nodes: [
                        {
                            text: '12月0.5米公开版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201412_50GK2K/ImageServer',
                            layer: 'SZAVI201412_50GK2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '10月0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI201410_50ZW2K/ImageServer',
                            layer: 'SZSRI201410_50ZW2K',
                            serverType: 'ArcGIS Server',
                        }
                    ]
                },
                {
                    text: '2013',
                    nodes: [
                        {
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201311_50GK2K/ImageServer',
                            text: '11月0.5米公开版航片',
                            layer: 'SZAVI201311_50GK2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '0.5米公开版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI2013_50ZW2K/ImageServer',
                            layer: 'SZSRI2013_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '1米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI2013_100ZW2K/ImageServer',
                            layer: 'SZSRI2013_100ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2012',
                    nodes: [
                        {
                            text: '0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI2012_50ZW2K/ImageServer',
                            layer: 'SZSRI2012_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '11月0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIPL201211_50ZW2K/ImageServer',
                            layer: 'SZSRIPL201211_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2011',
                    nodes: [
                        {
                            text: '11月0.5米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI201111_50ZW2K/ImageServer',
                            layer: 'SZAVI201111_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '0.8米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIIK2011_80ZW2K/ImageServer',
                            layer: 'SZSRIIK2011_80ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2010',
                    nodes: [
                        {
                            text: '0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIWQ2010_50ZW2K/ImageServer',
                            layer: 'SZSRIWQ2010_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2009',
                    nodes: [
                        {
                            text: '2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI2009_250ZW2K/ImageServer',
                            layer: 'SZSRI2009_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '12月0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIWQ200912_50ZW2K/ImageServer',
                            layer: 'SZSRIWQ200912_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '06月0.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIWQ200906_50ZW2K/ImageServer',
                            layer: 'SZSRIWQ200906_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2008',
                    nodes: [
                        {
                            text: '0.2米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI2008_20ZW2K/ImageServer',
                            layer: 'SZAVI2008_20ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '12月0.6米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIWV200812_60ZW2K/ImageServer',
                            layer: 'SZSRIWV200812_60ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '0.6米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIQB2008_60ZW2K/ImageServer',
                            layer: 'SZSRIQB2008_60ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2007',
                    nodes: [
                        {
                            text: '0.5米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI2007_50ZW2K/ImageServer',
                            layer: 'SZAVI2007_50ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '12月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI200712_250ZW2K/ImageServer',
                            layer: 'SZSRI200712_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '10月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI200710_250ZW2K/ImageServer',
                            layer: 'SZSRI200710_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '07月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRISP200707_250ZW2K/ImageServer',
                            layer: 'SZSRISP200707_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '05月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRI200705_250ZW2K/ImageServer',
                            layer: 'SZSRI200705_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2006',
                    nodes: [
                        {
                            text: '12月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRISP200612_250ZW2K/ImageServer',
                            layer: 'SZSRISP200612_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '09月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRISP200609_250ZW2K/ImageServer',
                            layer: 'SZSRISP200609_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '06月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRISP200606_250ZW2K/ImageServer',
                            layer: 'SZSRISP200606_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '03月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRISP200603_250ZW2K/ImageServer',
                            layer: 'SZSRISP200603_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2005',
                    nodes: [
                        {
                            text: '11月2.5米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRISP200511_250ZW2K/ImageServer',
                            layer: 'SZSRISP200511_250ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '0.6米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIQB2005_60ZW2K/ImageServer',
                            layer: 'SZSRIQB2005_60ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2004',
                    nodes: [
                        {
                            text: '0.6米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI2004_60ZW2K/ImageServer',
                            layer: 'SZAVI2004_60ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2003',
                    nodes: [
                        {
                            text: '0.6米政务版卫片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZSRIIK2003_60ZW2K/ImageServer',
                            layer: 'SZSRIIK2003_60ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
                {
                    text: '2001',
                    nodes: [
                        {
                            text: '1米政务版航片',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZIMAGE/SZAVI2001_100ZW2K/ImageServer',
                            layer: 'SZAVI2001_100ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                    ],
                },
            ],
        },
        {
            text: '基础地图',
            nodes: [
                {
                    text: '电子地图',
                    nodes: [
                        {
                            text: '矢量底图-白色-版本1',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_BASEMAP_ZW2K/MapServer',
                            layer: 'SZMAP_BASEMAP_ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '矢量底图-白色-版本2',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/ST/SZMAP_ST_ZW2K/MapServer',
                            layer: 'SZMAP_ST_ZW2K',
                            serverType: 'ArcGIS Server',
                            type: "1"
                        },
                        {
                            text: '矢量底图-蓝色',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_BLUE_ZW2K/MapServer',
                            layer: 'SZMAP_BLUE_ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '矢量底图-蓝色-无注记',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_MAP_ZFW_ZW2K/MapServer',
                            layer: 'SZMAP_MAP_ZFW_ZW2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '行政区划矢量地图',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_SDDT_ZW2K/MapServer',
                            layer: 'SZMAP_SDDT_ZW2K',
                            serverType: 'ArcGIS Server',
                            origin: [-400, 399.9999999999998]
                        },
                        {
                            text: '轨道交通矢量地图',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZTHEME/SZMAP_ROAD_GK2K/MapServer',
                            layer: 'SZMAP_ROAD_GK2K',
                            serverType: 'ArcGIS Server',
                        },
                        {
                            text: '社区网格图',
                            url:
                                'http://192.168.37.161/tilemap_1/rest/services/SZTHEME/XZQ_WGB_2K/MapServer',
                            layer: 'XZQ_WGB_2K',
                            serverType: 'ArcGIS Server2',
                        }
                    ]
                },
                {
                    text: '水务底图',
                    nodes: [
                        {
                            text: '水务底图-地形版',
                            url: 'http://10.253.190.57:8080/iserver/services/map-ugcv5-dixingfa1/wmts-china',
                            layer: 'dixing_fa1',
                            matrixSet: 'Custom_dixing_fa1',
                            serverType: 'WMTS',
                        },
                        {
                            text: '水务底图-浅色版',
                            url: 'http://10.253.190.57:8080/iserver/services/map-ugcv5-szday/wmts-china',
                            layer: 'sz_day',
                            matrixSet: 'Custom_sz_day',
                            serverType: 'WMTS',
                        },
                        {
                            text: '水务底图-蓝色版',
                            url: 'http://10.253.190.57:8080/iserver/services/map-ugcv5-szDark/wmts-china',
                            layer: 'sz_Dark',
                            matrixSet: 'Custom_sz_Dark',
                            serverType: 'WMTS',
                        },
                        {
                            text: '行政区划四色图底图',
                            url: 'http://10.253.190.57:8090/iserver/services/map-sz/wmts-china',
                            layer: 'sz_day_xzqh_sst',
                            matrixSet: 'ChinaPublicServices_sz_day_xzqh_sst',
                            serverType: 'WMTS2',
                        },
                        {
                            text: '流域分区四色图底图',
                            url: 'http://10.253.190.57:8090/iserver/services/map-sz/wmts-china',
                            layer: 'sz_day_xzqh_lyfqsst',
                            matrixSet: 'ChinaPublicServices_sz_day_xzqh_lyfqsst',
                            serverType: 'WMTS2',
                        }
                    ]
                }
            ]
        }
    ]
    var themeLayerData = [
        {
            text: '水务基础图层',
            nodeId: 'basic',
            nodes: [
                {
                    text: '江河湖泊',
                    nodes: JHHP,
                },
                {
                    text: '水利工程',
                    nodes: SLGC

                },
                {
                    text: '监测站(点)',
                    nodes: JCZ
                },
                {
                    text: '其他管理对象',
                    nodes: [
                        ...QTGLDX,
                        {
                            text: '排水分区',
                            nodes: PSM
                        }
                    ]
                },
                {
                    text: '组织机构',
                    nodes: [
                        ...ZZJG,
                        {
                            text: '行政区划',
                            nodes: XZQH
                        }
                    ]
                },
            ],
        },
        {
            text: '城市规化',
            nodes: [
                {
                    text: '法定图则',
                    nodes: [
                        {
                            text: '土地利用规划控制',
                            url:
                                'http://192.168.37.161/dynamap_1/rest/services/FDTZ_2K/MapServer',
                            layer: 'FDTZ_2K',
                            serverType: 'ArcGIS Server2',
                        },
                    ],
                },
                {
                    text: '空间管控',
                    nodes: [
                        {
                            text: '永久基本农田',
                            url:
                                'http://192.168.37.161/dynamap_1/rest/services/JBNT2017_YJ_2K/MapServer',
                            layer: 'JBNT2017_YJ_2K',
                            serverType: 'ArcGIS Server2',
                        },
                    ],
                },
                {
                    text: '蓝线',
                    nodes: [
                        {
                            text: '蓝线',
                            url:
                                'http://192.168.37.161/dynamap_1/rest/services/BLUE_LINE_2K/MapServer',
                            layer: 'BLUE_LINE_2K',
                            serverType: 'ArcGIS Server2',
                        },
                    ],
                },
                {
                    text: '紫线',
                    nodes: [
                        {
                            text: '紫线',
                            url:
                                'http://192.168.37.161/dynamap_1/rest/services/PURPLE_POLY_2K/MapServer',
                            layer: 'PURPLE_POLY_2K',
                            serverType: 'ArcGIS Server2',
                        },
                    ],
                },
            ],
        },
        {
            text: '交通',
            nodes: [
                {
                    text: '轨道',
                    url:
                        'http://192.168.37.161/dynamap_1/rest/services/ORBIT_2K/MapServer',
                    layer: 'ORBIT_2K',
                    serverType: 'ArcGIS Server2',
                },
                {
                    text: '道路',
                    url:
                        'http://192.168.37.161/dynamap_1/rest/services/ROAD_2K/MapServer',
                    layer: 'ROAD_2K',
                    serverType: 'ArcGIS Server2',
                },
            ],
        },
        {
            text: '注记',
            nodes: [
                {
                    text: '矢量注记（蓝色）',
                    url:
                        'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_ANNO_ZFW_ZW2K/MapServer',
                    layer: 'SZMAP_ANNO_ZFW_ZW2K',
                    serverType: 'ArcGIS Server',
                },
                {
                    text: '影像注记',
                    url:
                        'http://192.168.37.161/tilemap_1/rest/services/SZMAP/SZMAP_ANNO_ZW2K/MapServer',
                    layer: 'SZMAP_ANNO_ZW2K',
                    serverType: 'ArcGIS Server',
                },
            ],
        },
        {
            text: '海岸线',
            nodes: [
                {
                    text: '海岸线2013年',
                    url:
                        'http://192.168.37.161/dynamap_1/rest/services/COASTLINE_2K/MapServer',
                    layer: 'COASTLINE_2K',
                    serverType: 'ArcGIS Server2',
                },
            ],
        },
        {
            text: '水系',
            nodes: [
                {
                    text: '水系矢量',
                    url:
                        'http://192.168.37.161/tilemap_1/rest/services/SZTHEME/SZMAP_WATER_ZW2K/MapServer',
                    layer: 'SZMAP_ROAD_GK2K',
                    serverType: 'ArcGIS Server',
                },
            ],
        },
        {
            text: '涉水建筑物',
            nodes: [
                {
                    text: '涉水建筑物',
                    url:
                        'http://10.253.190.57:8080/iserver/services/map-mvt-szrvlks/restjsr/v1/vectortile/maps/sz_rvlks',
                    layer: 'SZMAP_ROAD_LOU',
                    serverType: 'ArcGIS Server3',
                },
            ],
        },
    ]
    var projectionExtent = [-180, -90, 180, 90]
    // 4490坐标系需自定义
    proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
    // ol.proj.proj4.register(proj4);
    var projection = new ol.proj.get('EPSG:4490')
    projection.setExtent(projectionExtent)

    // 指定此Arcgis图层的分辨率
    var resolutions = [
        0.001373291015624828,
        0.000686645507812414,
        0.000343322753906207,
        0.0001716613769531035,
        0.00008583068847655175,
        0.000042915344238275876,
        0.000021457672119137938,
        0.000010728836059568969,
        0.0000053644180297844846,
        0.0000026822090148922423,
        0.0000013411045074461211,
    ]

    var matrixIds = []
    for (var z = 0; z < resolutions.length; ++z) {
        matrixIds[z] = z
    }
    var url = BASE_LAYERS.image
    var view = new ol.View({
        projection: projection, //坐标系参数如果不设置，则默认为墨卡托
        resolutions: resolutions, //分辨率层级数组
        center: [114.139825956825, 22.6513875967627],
        zoom: 1,
        maxZoom: 20
    })

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                id: 'baseLayer',
                source: new ol.source.XYZ({
                    url: url,
                    projection: projection,
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: [-180, 90],
                        tileSize: 256,
                        resolutions: resolutions,
                        matrixIds: matrixIds,
                    }),
                }),
            }),
        ],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: {
                collapsible: false
            }
        }),
        view: view,
    })

    var currentLayerGroupId = 'image'
    var layerList = document.getElementById('menu')
    var inputs = layerList.getElementsByTagName('input')
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = switchMapStyle
    }

    // 切换底图类型
    function switchMapStyle(layer) {
        var layerGroupId = layer.target.id
        if (!layerGroupId) return
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === 'baseLayer') {
                findLayer = each
            }
        }
        if (findLayer) map.removeLayer(findLayer)
        var url = BASE_LAYERS[layerGroupId]
        var baseLayer = new ol.layer.Tile({
            id: 'baseLayer',
            source: new ol.source.XYZ({
                url: url,
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutions,
                    matrixIds: matrixIds,
                })
            })
        })
        map.addLayer(baseLayer)
        baseLayer.setZIndex(0)
        currentLayerGroupId = layerGroupId
    }

    // 挂接弹窗div
    var content = document.getElementById('info-content')
    var overlay = new ol.Overlay({
        element: document.getElementById('info'),
        autoPan: true,
        autoPanAnimation: {
            duration: 250,
        },
    })
    // map绑定popup
    map.addOverlay(overlay)
    // 关闭按钮
    document.getElementById('popup-closer').onclick = function () {
        overlay.setPosition(undefined)
        this.blur()
        return false
    }

    function addBaseLayer(data) {
        var url = data.url
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === 'baseLayer') {
                findLayer = each
            }
        }
        if (findLayer) map.removeLayer(findLayer)
        var origin = [-180, 90]
        if (data.hasOwnProperty('origin')) {
            origin = data.origin
        }
        var resolutionsObj = resolutions
        var matrixIdsObj = matrixIds
        if (data.hasOwnProperty('type') && data.type === '1') {
            resolutionsObj = new Array(18);
            matrixIdsObj = new Array(18);
            for (var z = 0; z < 18; ++z) {
                var res = 0.703125
                resolutionsObj[z] = res / Math.pow(2, z - 1);
                matrixIdsObj[z] = z;
            }
        }
        var source = new ol.source.XYZ({
            url: url + '/tile/{z}/{y}/{x}',
            projection: projection,
            tileGrid: new ol.tilegrid.WMTS({
                origin: origin,
                tileSize: 256,
                resolutions: resolutionsObj,
                matrixIds: matrixIdsObj,
            }),
        })
        if (data.serverType === "ArcGIS Server2") {
            source = new ol.source.TileArcGISRest({
                url: url,
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutions,
                    matrixIds: matrixIds,
                })
            })
        }

        var baseLayer = new ol.layer.Tile({
            id: 'baseLayer',
            source: source
        })
        map.addLayer(baseLayer)
        baseLayer.setZIndex(0)
    }

    // 保存已添加图层style
    var styleArr = []

    // 加载矢量瓦片图层
    function addVectorTileLayer(key, params) {
        console.log(params)
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === key) {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }
        var format = new ol.format.MVT({
            featureClass: ol.Feature,
        })
        var styleURL = params.vtUrl + '/style.json'
        var style = new ol.supermap.MapboxStyles({
            style: styleURL,
            map: map,
            selectedStyle: function (feature) {
                if (feature.getGeometry() instanceof ol.geom.Point) {
                    return new ol.style.Style({
                        image: new ol.style.Icon({
                            crossOrigin: 'anonymous',
                            src: 'img/selectIcon.png',
                            scale: 0.8,
                        }),
                    })
                } else {
                    return new ol.style.Style({
                        image: new ol.style.Circle({
                            stroke: new ol.style.Stroke({
                                color: 'red',
                                width: 3,
                            }),
                        }),
                        stroke: new ol.style.Stroke({
                            color: 'red',
                            width: 3
                        }),
                        fill: new ol.style.Fill({
                            color: 'rgba(0, 0, 255, 0.1)',
                        }),
                    })
                }
            },
        })
        style.on('styleloaded', function () {
            let vectorLayer = new ol.layer.VectorTile({
                declutter: true,
                source: new ol.source.VectorTileSuperMapRest({
                    style: styleURL,
                    projection: projection,
                    format: format,
                }),
                style: style.getStyleFunction(),
            })
            vectorLayer.set('id', key)
            map.addLayer(vectorLayer)
            vectorLayer.setZIndex(5)
            styleArr.push({
                id: key,
                style: style,
            })
        })
    }

    // 地图点击
    map.on('click', mapOnClickListener)

    function mapOnClickListener(e) {
        // 取消定位
        overlay.setPosition(undefined)
        var selected = false
        // 获取点位要素
        var features = map.getFeaturesAtPixel(e.pixel, {
            hitTolerance: 5, // 容差
        })
        if (!features || !features.length) return
        var props = features[0].getProperties()
        console.log(props)
        let layerKey = '' // 图层名称
        if (props.layer) {
            let sourceArr = props.layer.split('@')
            layerKey = sourceArr[1]
        }
        let html = ''
        // 将主要字段放在前面
        if (props['obj_name']) {
            html = html + '名称：' + props['obj_name'] + '<br>'
        }
        if (props['obj_code']) {
            html = html + '编码：' + props['obj_code'] + '<br>'
        }
        if (props['bas_nm']) {
            html = html + '所属流域：' + props['bas_nm'] + '<br>'
        }
        if (props['bas_cd']) {
            html = html + '流域编码：' + props['bas_cd'] + '<br>'
        }
        if (props['name']) {
            html = html + '名称：' + props['name'] + '<br>'
        }

        let ignoreProps = [
            'center_x',
            'center_y',
            'geometry',
            'layer',
            'fd_type',
            'obj_name',
            'obj_code',
            'elementtype',
            'elementtyp',
            'bas_nm',
            'bas_cd',
            'UserID',
            'Z',
            'elementtyp',
            'elementtype',
            'RefName',
            'Field_smuserid',
            'field_smuserid',
            'Field_SmUserID',
            'name',
            'code',
            'CODE',
            'PRJTP',
            'LY_2',
            'x1',
            'x2',
            'y1',
            'y2',
            'Field_SmUserID',
            'Field_SmUserID_1',
        ]
        for (let prop in props) {
            // 忽略supermap自带字段 与 自定义忽略字段
            if (
                prop.substr(0, 2).toUpperCase() === 'SM' ||
                ignoreProps.includes(prop)
            ) {
                continue
            }
            let propName = getCnField(layerKey, prop)
            html = html + propName + '：' + props[prop] + '<br>'
        }
        content.innerHTML = html
        if (!html) return
        // 指定弹窗位置
        overlay.setPosition(e.coordinate)
        selected = true
    }

    // 鼠标移上高亮
    map.on('pointermove', pointermoveFunc)
    let currStyle = null
    let currLayer = null

    function pointermoveFunc(e) {
        if (e.dragging) return
        if (currStyle && currLayer) {
            currStyle.clearSelectedObjects()
            currLayer.changed()
        }
        map.forEachFeatureAtPixel(
            e.pixel,
            function (feature, featureLayer) {
                debugger
                if (!feature.id_){
                    return
                }
                if (featureLayer.get('id') === 'markerLayer') {
                    return
                }
                if (feature) {
                    let url = featureLayer.getSource()._tileUrl
                    if (url) {
                        let index = url.lastIndexOf('tile')
                        url = url.substr(0, index - 1)
                        let id = featureLayer.get('id')
                        let i = styleArr.findIndex((item) => {
                            return item.id == id
                        })

                        let style = styleArr[i].style
                        currStyle = style
                        currLayer = featureLayer
                        style.setSelectedId(
                            feature.getId(),
                            feature.getProperties().layer
                        )
                        featureLayer.changed()
                    }

                }
            },
            {
                hitTolerance: 1,
            }
        )
    }

    // 获取中文字段名
    function getCnField(key, en) {
        if (!key) return en
        if (!FIELD_CONFIG[key]) return en
        return FIELD_CONFIG[key][en] ? FIELD_CONFIG[key][en] : en
    }

    // 移除图层
    function removeLayer(key) {
        console.log(key)
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === key) {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
            styleArr.splice(
                styleArr.findIndex(
                    (item) => item.id === findLayer.get('id')
                ),
                1
            )
        }
    }

    function addNodeLayer(key, params) {
        if (params.serverType === 'ArcGIS Server') {
            addArcGISLayer(key, params)
        } else if (params.serverType === 'VectorTile') {
            addVectorTileLayer(key, params)
        } else if (params.serverType === 'ArcGIS Server2') {
            addTileArcGISLayer(key, params)
        }else if(params.serverType === 'ArcGIS Server3'){
            buildingQuery(key)
        } else if (params.serverType === 'YZT WMTS') {
            var serviceUrl = GMAPURL.replace(/{{serviceCode}}/, params.serverCode)
            var wmsLayer = new ol.layer.Tile({
                id: params.serverCode,
                source: getWMTSLayer(serviceUrl)
            })

            wmsLayer.setZIndex(params.zIndex)

            if (['YZT1597746938011', 'YZT1597746964536'].includes(params.serverCode)) {
                map.getView().setCenter([115.36502, 22.7787])
                map.getView().setZoom(8)
            }
            map.addLayer(wmsLayer)
            console.log(wmsLayer)
        } else if (params.serverType === 'YZT YSFW') {
            var serviceUrl = GMAPURL.replace(/{{serviceCode}}/, params.serverCode)
            var wfsObj = getWFSLayer(serviceUrl)
            var vectorLayer = new ol.layer.Vector({
                id: params.serverCode,
                source: wfsObj.source,
                style: wfsObj.style
            });
            map.addLayer(vectorLayer)
        }
    }


    function addArcGISLayer(key, params) {
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === key) {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }
        var layer = new ol.layer.Tile({
            id: key,
            source: new ol.source.XYZ({
                url: params.url + '/tile/{z}/{y}/{x}',
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutions,
                    matrixIds: matrixIds,
                }),
            }),
        })
        map.addLayer(layer)
        layer.setZIndex(5)
    }

    function addTileArcGISLayer(key, params) {
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === key) {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }
        var layer = new ol.layer.Tile({
            id: key,
            source: new ol.source.TileArcGISRest({
                url: params.url,
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutions,
                    matrixIds: matrixIds,
                }),
            }),
        })
        map.addLayer(layer)
        layer.setZIndex(5)
    }


    var nodeCheckedSilent = false

    function nodeChecked(event, node) {
        console.log(node)
        if (nodeCheckedSilent) return
        nodeCheckedSilent = true
        addNodeLayer(node.nodeId, node)
        // addVectorTileLayer(node.nodeId, node)
        checkAllParent(node)
        checkAllSon(node)
        nodeCheckedSilent = false
    }

    var nodeUncheckedSilent = false

    function nodeUnchecked(event, node) {
        console.log(node)
        if (nodeUncheckedSilent) {
            return
        }
        nodeUncheckedSilent = true
        removeLayer(node.nodeId)
        uncheckAllParent(node)
        uncheckAllSon(node)
        nodeUncheckedSilent = false
    }

    // 选中全部父节点
    function checkAllParent(node) {
        $('#tree1').treeview('checkNode', node.nodeId, {
            silent: true,
        })

        var parentNode = $('#tree1').treeview('getParent', node.nodeId)
        if (!('nodeId' in parentNode)) {
            return
        } else {
            checkAllParent(parentNode)
        }
    }

    //取消全部父节点
    function uncheckAllParent(node) {
        $('#tree1').treeview('uncheckNode', node.nodeId, {
            silent: true,
        })
        var siblings = $('#tree1').treeview('getSiblings', node.nodeId)
        var parentNode = $('#tree1').treeview('getParent', node.nodeId)
        if (!('nodeId' in parentNode)) {
            return
        }
        var isAllUnchecked = true //是否全部没选中
        for (var i in siblings) {
            if (siblings[i].state.checked) {
                isAllUnchecked = false
                break
            }
        }
        if (isAllUnchecked) uncheckAllParent(parentNode)
    }

    // 级联选中所有子节点
    function checkAllSon(node) {
        $('#tree1').treeview('checkNode', node.nodeId, {
            silent: true,
        })
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                addNodeLayer(node.nodes[i].nodeId, node.nodes[i])
                // addVectorTileLayer(node.nodes[i].nodeId, node.nodes[i])
                checkAllSon(node.nodes[i])
            }
        }
    }

    // 级联取消所有子节点
    function uncheckAllSon(node) {
        if (!node) return
        $('#tree1').treeview('uncheckNode', node.nodeId, {
            silen: true,
        })
        if (node.nodes != null && node.nodes.length > 0) {
            for (var i in node.nodes) {
                removeLayer(node.nodes[i].nodeId)
                uncheckAllSon(node.nodes[i])
            }
        }
    }

    $('#tree1').treeview({
        showCheckbox: true,
        data: themeLayerData,
        onNodeChecked: nodeChecked,
        onNodeUnchecked: nodeUnchecked,
        levels: 3,
    })

    $('#tree1').treeview('uncheckAll', {
        silent: true,
    })

    function nodeSelected(event, node) {
        if (node.serverType === "WMTS") {
            addWMTSLayer(node.nodeId, node)
        } else if(node.serverType === "WMTS2") {
            addWMTSLayer2(node.nodeId, node)
        } else {
            addBaseLayer(node)
        }
    }

    $('#treeBaseLayer').treeview({
        showCheckbox: false,
        data: baseData,
        levels: 3,
        onNodeSelected: nodeSelected,
    })
    // 粤政图
    $('#treeYztlayers').treeview({
        showCheckbox: true,
        data: yztLayersData,
        onNodeChecked: nodeChecked,
        onNodeUnchecked: nodeYztUnchecked,
        levels: 2
    })

    $('#treeYztlayers').treeview('uncheckAll', {
        silent: true,
    })

    function nodeYztUnchecked(event, node) {
        if (nodeUncheckedSilent) {
            return
        }
        nodeUncheckedSilent = true
        removeLayer(node.serverCode)
        uncheckAllParent(node)
        uncheckAllSon(node)
        nodeUncheckedSilent = false
    }

    $('#tbStat').bootstrapTable({
        striped: true, //是否显示行间隔色
        cache: false, //是否使用缓存，默认为true
        smartDisplay: false,
        search: false, //是否显示表格搜索
        strictSearch: true,
        showColumns: false, //是否显示所有的列
        showRefresh: false, //是否显示刷新按钮
        minimumCountColumns: 2, //最少允许的列数
        clickToSelect: true, //是否启用点击选中行
        height: 520, //行高
        uniqueId: 'ID', //每一行的唯一标识
        showToggle: false, //是否显示详细视图和列表视图的切换按钮
        cardView: false, //是否显示详细视图
        detailView: false, //是否显示父子表
        columns: [
            {
                field: 'obj_type_name',
                title: '名称',
                width: 180,
            },
            {
                field: 'count',
                title: '数量',
                width: 120,
            }
        ], //列设置
        onClickRow: function (row, $element) {
            if (bufferWKT && row.obj_type) {
                $('#bufferback')[0].style.display = 'block'
                // $('#bufferback2')[0].style.display = 'inline-grid'
                getItemList(row.obj_type)
            } else {
                onClickQuery(row.obj_type,keyword)
            }
        },
    })

    // 统计
    var keyword = ""
    function onClickStatistic() {
        clearInteraction()
        $('.panel-result')[0].style.display = 'block'
        $('.tbStat')[0].style.display = 'block'
        $('.tbQuery')[0].style.display = 'none'
        keyword= $('#sKeyword')[0].value
        // 请求参数
        var jsonParam = JSON.stringify({
            keyword: keyword,
        })
        $.ajax({
            url: REQUEST_STAT,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    var result = {
                        data: res.data.groups,
                        total: res.data.groups.length,
                    }
                    $('#tbStat').bootstrapTable('load', result)
                }
            }
        })
    }

    loadSelector()

    // 加载所有类型
    function loadSelector() {
        // 请求所有类型
        var jsonParam = JSON.stringify({
            keyword: '',
        })
        $.ajax({
            url: REQUEST_STAT,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    var opts = res.data.groups
                    var html = ''
                    for (let each of opts) {
                        html +=
                            '<option value="' +
                            each.obj_type +
                            '">' +
                            each.obj_type_name +
                            '</option>'
                    }
                    $('.typeList').append(html)
                }
            },
        })
    }

    // 初始化表格
    $('#tbQuery').bootstrapTable({
        striped: true, //是否显示行间隔色
        // cache: false, //是否使用缓存，默认为true
        smartDisplay: false,
        search: false, //是否显示表格搜索
        strictSearch: true,
        showColumns: false, //是否显示所有的列
        showRefresh: false, //是否显示刷新按钮
        minimumCountColumns: 2, //最少允许的列数
        clickToSelect: true, //是否启用点击选中行
        height: 520, //行高
        uniqueId: 'ID', //每一行的唯一标识，一般为主键列
        showToggle: false, //是否显示详细视图和列表视图的切换按钮
        cardView: false, //是否显示详细视图
        detailView: false, //是否显示父子表
        pageNumber: 1, //初始化加载第一页
        pagination: true, //是否分页
        pageSize: 20, //单页记录数
        onClickRow: rowClick,
        onPageChange: pageChanged,
        columns: [
            {
                field: 'obj_code',
                title: '编码',
                width: 80,
            },
            {
                field: 'obj_name',
                title: '名称',
                width: 180,
            },
        ]
    })

    var queryData = []
    var currData = []

    // 页码切换
    function pageChanged(pageNum) {
        overlay.setPosition(undefined)
        if (bufferWKT) {
            var size = $('#tbQuery')[0].rows.length - 1
            let copyData = queryData.slice()
            currData = copyData.splice((pageNum - 1) * size, size)
            AddMapPoints(currData)
        } else {
            var size = $('#tbQuery')[0].rows.length - 1
            let copyData = queryData.slice()
            currData = copyData.splice((pageNum - 1) * size, size)
            AddMapPoints(currData)
        }
    }

    function showDetail(obj) {
        overlay.setPosition(undefined)
        var props = obj
        content.innerHTML =
            '编号：' +
            props['obj_code'] +
            '<br>' +
            '名称：' +
            props['obj_name'] +
            '<br>' +
            '类型：' +
            props['obj_type_name'] +
            '<br>' +
            '经度：' +
            props['center_x'] +
            '<br>' +
            '纬度：' +
            props['center_y']
        overlay.setPosition([
            parseFloat(props['center_x']),
            parseFloat(props['center_y']),
        ])
    }

    var searchQueryByID = ''

    function getDetail(id, type) {
        var jsonParam = JSON.stringify({
            id: id
        })
        $.ajax({
            url: REQUEST_DETAIL,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    showDetail(res.data.item)
                    if (selectType === 4) {
                        console.log("getDetail")
                        console.log(JSON.stringify(res.data.item))
                        searchQueryByID = id
                        getBufferArea(res.data.item, type)
                    }
                }
            },
        })
    }

    // 行点击
    function rowClick(row, $element, field) {
        // 查询详情并定位
        getDetail(row.id)
        // 定位
        view.setCenter([
            parseFloat(row['center_x']),
            parseFloat(row['center_y']),
        ])
        view.setZoom(6)
    }

    function searchQuery() {
        var searchDisplay = document.getElementById('searchListDiv').style.display
        var type = ''
        keyword = ''
        if (searchDisplay === 'table') {
            // 缓冲区要素类型
            type = $('#searchList')[0].value
            getDetail(searchQueryByID, [type])
            getItemList(type)
        } else {
            type = $('#typeList2')[0].value
            onClickQuery(type, keyword)
        }
    }

    // 查询按钮
    function onClickQuery(elementType, newKeyword) {
        clearInteraction()
        $('.panel-result')[0].style.display = 'block'
        $('.tbStat')[0].style.display = 'none'
        $('.tbQuery')[0].style.display = 'block'
        var type = $('#typeList')[0].value
        var keyword = $('#qKeyword')[0].value

        if (elementType) {
            type = elementType
        }
        if (newKeyword) {
            keyword = newKeyword
        }

        if (!type) return
        // 请求参数
        var jsonParam = JSON.stringify({
            pageIndex: 1,
            pageSize: 500000,
            objType: type,
            keyword: keyword,
        })
        $.ajax({
            url: REQUEST_QUERY,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    queryData = res.data.item
                    var result = {
                        data: queryData,
                        total: res.data.item.length,
                    }
                    $('.bufferDistanceDiv')[0].style.display = 'table'
                    $('#tbQuery').bootstrapTable('load', result)
                    pageChanged(1)
                }
            },
        })
    }

    var markerLayer = null

    function AddMapPoints(data) {
        var features = []
        for (let each of data) {
            features.push({
                type: 'Feature',
                properties: each,
                geometry: {
                    type: 'Point',
                    coordinates: [
                        parseFloat(each.center_x),
                        parseFloat(each.center_y),
                    ],
                },
            })
        }

        var vectorSource = new ol.source.Vector({
            features: new ol.format.GeoJSON().readFeatures({
                type: 'FeatureCollection',
                features: features,
            }),
            wrapX: false,
        })
        if (markerLayer) {
            markerLayer.setSource(vectorSource)
        } else {
            markerLayer = new ol.layer.Vector({
                source: vectorSource,
                style: new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.5, 0.5],
                        src: 'img/markerbig_select.png',
                    }),
                }),
            })
            map.addLayer(markerLayer)
            markerLayer.setZIndex(7)
            markerLayer.set('id', 'markerLayer')
        }
        var extent = markerLayer.getSource().getExtent()
        view.fit(extent, map.getSize())
    }

    function onClickClose(value) {
        $('.panel-result')[0].style.display = 'none'
        $('#bufferback')[0].style.display = 'none'
        // $('#bufferback2')[0].style.display = 'none'
        $('#tbStat').bootstrapTable('load', {
            data: [],
            total: 0,
        })
        overlay.setPosition(undefined)
        $('#tbQuery').bootstrapTable('load', {
            data: [],
            total: 0,
        })
        removeLayer('markerLayer')
        markerLayer = null
        if (value === 'close') {
            if (vectorLayer) {
                map.removeLayer(vectorLayer)
            }
            if (sourceBuffer) {
                sourceBuffer.clear()
            }
        }
    }

    var sourceDraw = new ol.source.Vector({
        wrapX: false,
    })
    var layerDraw = new ol.layer.Vector({
        source: sourceDraw,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 153, 255, 0.8)',
                lineDash: [2, 4],
                width: 2,
            }),
        }),
    })
    var sourceBuffer = new ol.source.Vector({
        wrapX: false,
    })
    var layerBuffer = new ol.layer.Vector({
        source: sourceBuffer,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#6CBBFF',
                width: 3,
            }),
            fill: new ol.style.Fill({
                color: 'rgba(0, 0, 255, 0.1)',
            }),
        }),
    })
    map.addLayer(layerDraw)
    map.addLayer(layerBuffer)

    var buttons = $('.btn-group').children()
    var draw = null
    buttons.map(function (key) {
        var value = buttons[key].value
        if (value === 'Clear') {
            $(buttons[key]).on('click', function () {
                clearInteraction()
            })
            return
        }
        $(buttons[key]).on('click', function () {
            clearInteraction()
            draw = new ol.interaction.Draw({
                source: sourceDraw,
                type: buttons[key].value,
                snapTolerance: 20,
            })
            map.addInteraction(draw)
            draw.on('drawend', featureDrawEnd)
        })
    })

    var drawFeature = null
    var bufferWKT = null

    function featureDrawEnd(event) {
        // 移除交互
        clearInteraction()
        // 存储当前绘制的对象
        drawFeature = event.feature
        let bufferDistance = $('#distance')[0].value
        if (!bufferDistance) {
            bufferDistance = bufferDistance + 0.001
        }
        bufferWKT = startBufferHandler(drawFeature, bufferDistance)
        loadBufferSearch(bufferWKT)
    }

    function startBufferHandler(feature, distance) {
        let polygonGeometry = null
        bufferArea = buildBuffer(feature, distance)
        sourceBuffer.clear()
        sourceBuffer.addFeature(bufferArea)
        // 转换为WKT格式
        polygonGeometry = bufferArea.getGeometry()
        let format = new ol.format.WKT()
        let wkt = format.writeGeometry(polygonGeometry)
        return wkt
    }

    function loadBufferSearch(wkt, elementType) {
        if (!wkt) return
        let checkedNodes = $('#tree1').treeview('getChecked')
        let types = []
        // for (let each of checkedNodes) {
        //     if (!each.state.expanded) {
        //         types.push(each.layer)
        //     }
        // }
        if (elementType) {
            types = elementType
        }
        $('#searchListDiv')[0].style.display = 'table'
        $('.panel-result')[0].style.display = 'block'
        $('.tbStat')[0].style.display = 'block'
        $('.tbQuery')[0].style.display = 'none'
        var jsonParam = JSON.stringify({
            location: wkt,
            objTypes: types,
        })
        document.getElementById('searchList').innerHTML = ''
        $.ajax({
            url: REQUEST_BUFFERCOUNT,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    var opts = res.data.groups
                    var html = ''

                    for (let each of opts) {
                        html +=
                            '<option value="' +
                            each.obj_type +
                            '">' +
                            each.obj_type_name +
                            '</option>'
                    }
                    $('#searchList').append(html)
                    if (opts) {
                        $('#tbStat').bootstrapTable(
                            'load',
                            res.data.groups
                        )
                    }
                }
            }
        })
    }

    function getItemList(type) {
        $('.panel-result')[0].style.display = 'block'
        $('.tbStat')[0].style.display = 'none'
        $('.tbQuery')[0].style.display = 'block'

        // 请求参数
        var jsonParam = JSON.stringify({
            pageIndex: 1,
            pageSize: 200000,
            location: bufferWKT,
            objType: type,
        })
        $.ajax({
            url: REQUEST_BUFFERDATA,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    queryData = res.data.item
                    var result = {
                        data: queryData,
                        total: res.data.total,
                    }
                    $('#tbQuery').bootstrapTable('load', result)
                    pageChanged(1)
                }
            },
        })
    }

    let buildBuffer = function (feature, radius, options, num) {
        let format_ = new ol.format.GeoJSON()
        let geojson = null
        if (num) {
            geojson = feature.features[0]
        } else {
            geojson = format_.writeFeatureObject(feature)
        }
        let result
        try {
            result = turf.buffer(geojson, Number(radius), options)
        } catch (error) {
            console.log(error)
            let simple = turf.simplify(geojson)
            result = turf.buffer(simple, Number(radius), options)
        }
        let resultFeature = null
        if (result) {
            if (result.type === 'Feature') {
                resultFeature = format_.readFeatureFromObject(result)
            } else if (result.type === 'FeatureCollection') {
                resultFeature = format_.readFeaturesFromObject(result)
            }
        }
        return resultFeature
    }

    function backtoForward() {
        $('#bufferback')[0].style.display = 'none'
        // $('#bufferback2')[0].style.display = 'none'
        $('.panel-result')[0].style.display = 'block'
        $('.tbStat')[0].style.display = 'block'
        $('.tbQuery')[0].style.display = 'none'
        removeLayer('markerLayer')
        markerLayer = null
    }

    function clearInteraction() {
        if (sourceDraw) {
            sourceDraw.clear()
        }
        if (sourceBuffer) {
            sourceBuffer.clear()
        }
        if (bufferWKT) {
            bufferWKT = null
        }
        if (draw) {
            map.removeInteraction(draw)
            draw = null
        }
        onClickClose()
    }

    var selectType = 1

    // tab切换
    function handleSelect(type) {
        selectType = type
        clearInteraction()
        $('.panel-result')[0].style.display = 'none'
        $('.tbStat')[0].style.display = 'none'
        $('.tbQuery')[0].style.display = 'none'
        $('.bufferQuery')[0].style.display = 'none'
        $('#searchListDiv')[0].style.display = 'none'
        $('.bufferDistanceDiv')[0].style.display = 'none'
        if (type === 4) {
            $('.panel-result')[0].style.marginTop = '40px'
        }
    }

    // 缓冲区相关要素类型
    function handleSearch() {
        removeLayer('markerLayer')
        markerLayer = null
        if (vectorLayer) {
            map.removeLayer(vectorLayer)
        }
        if (sourceBuffer) {
            sourceBuffer.clear()
        }
        bufferWKT = ''
        view.setZoom(1)
        view.setCenter([114.139825956825, 22.6513875967627])
        $('.tbQuery')[0].style.display = 'none'
        $('.panel-result')[0].style.display = 'block'
        $('.tbStat')[0].style.display = 'block'
        var jsonParam = JSON.stringify({
            keyword: '',
        })
        $.ajax({
            url: REQUEST_STAT,
            data: jsonParam,
            type: 'POST',
            contentType: 'application/json',
            dataType: 'json',
            success: function (res) {
                if (res.data) {
                    console.log(res.data)
                    if (res.data.groups) {
                        $('#tbStat').bootstrapTable(
                            'load',
                            res.data.groups
                        )
                    }
                }
            },
        })
    }

    var vectorLayer = null

    // 缓冲区绘制
    function getBufferArea(data, type) {
        if (vectorLayer) {
            map.removeLayer(vectorLayer)
        }
        var bufferValue = $('#bufferDistance')[0].value
        var geometry = new ol.format.GeoJSON().readFeature(data.geoShape);
        bufferWKT = startBufferHandler(geometry, bufferValue)
        sourceBuffer.addFeature(geometry)

        vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [geometry],
            }),
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: '#6db3d9'
                }),
                stroke: new ol.style.Stroke({
                    color: '#6db3d9',
                    width: 0
                })
            })
        })
        map.addLayer(vectorLayer)
        vectorLayer.setZIndex(6)
        loadBufferSearch(bufferWKT, type)
    }

    document.getElementById('typeList2').onchange = function () {
        $('#searchListDiv')[0].style.display = 'none'
        $('.bufferDistanceDiv')[0].style.display = 'none'
        if (vectorLayer) {
            map.removeLayer(vectorLayer)
        }
    }

    //获取地图服务图层信息
    function getCapabilities(serviceUrl, type) {
        var path = ''
        if (type === 'wmts') {
            path = '?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetCapabilities'
        } else {
            path = '?VERSION=1.0.0&REQUEST=GetFeature&SERVICE=WFS'
        }
        var xml;
        $.ajax({
            type: "get",
            url: serviceUrl + path,
            async: false,
            success: function (result) {
                xml = result;
            }
        });
        return xml;
    }

    function getWMTSLayer(serviceUrl) {
        var xml = getCapabilities(serviceUrl, 'wmts');
        var format = new ol.format.WMTSCapabilities();
        var geojson = format.read(xml.documentElement);
        if (!geojson) {
            return
        }
        var data = geojson.Contents.Layer[0];
        var layerParam = {
            layerName: data.Abstract,
            styleName: data.Style[0].Identifier,
            tilematrixset: data.TileMatrixSetLink[0].TileMatrixSet,
            format: data.Format[0]
        };
        var size = ol.extent.getWidth(projectionExtent) / 256;
        var resolutionsYzt = []
        var matrixIdsTzt = []
        for (var z = 2; z < 22; ++z) {
            resolutionsYzt[z] = size / Math.pow(2, z);
            matrixIdsTzt.push(z - 2)
        }
        var source = new ol.source.WMTS({
            url: serviceUrl + '?layer=' + layerParam.layerName,
            style: layerParam.styleName,
            matrixSet: layerParam.tilematrixset,
            format: layerParam.format,
            wrapX: true,
            tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutionsYzt,
                matrixIds: matrixIdsTzt
            })
        });
        return source;
    }

    function getWFSLayer(serviceUrl) {
        var result = getCapabilities(serviceUrl, 'wfs')
        var format = new ol.format.GML2();
        var features = format.readFeatures(result);
        var style = null

        if (features[0].getGeometry() instanceof ol.geom.Polygon) {
            style = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#868f98',
                    width: 1,
                }),
                fill: new ol.style.Fill({
                    color: '#DEECFB'
                })
            })
        } else if (features[0].getGeometry() instanceof ol.geom.Point) {
            style = new ol.style.Style({
                image: new ol.style.Circle({
                    fill: new ol.style.Fill({
                        color: '#ff0721'
                    }),
                    radius: 5
                })
            })
        } else if (features[0].getGeometry() instanceof ol.geom.LineString) {
            style = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#2899fb',
                    width: 4
                })
            })
        }
        var source = new ol.source.Vector({
            features: features
        })
        return {source: source, style: style}
    };
    // 拾取
    var pickClick = null
    var pickLayer = null

    function onClickPickup() {
        $('#tool-PickBox')[0].style.display = 'block'
        pickClick = map.on('click', function (e) {
            console.log(e)
            var coordinate = e.coordinate
            console.log(coordinate)
            $('#pointX')[0].value = coordinate[0];
            $('#pointY')[0].value = coordinate[1];
            var feature = new ol.Feature({
                geometry: new ol.geom.Point(coordinate),
            });
            if (pickLayer) {
                map.removeLayer(pickLayer)
            }
            pickLayer = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [feature],
                }),
                style: new ol.style.Style({
                    image: new ol.style.Circle({
                        fill: new ol.style.Fill({
                            color: '#ff1109'
                        }),
                        radius: 4
                    }),
                })
            })
            map.addLayer(pickLayer)
            pickLayer.setZIndex(4)
        })
    }
    function buildingQuery(key,wktString) {
        let geo = "LINESTRING(113.96268367767334 22.616794109344482,113.96281242370605 22.61735200881958,113.96324157714844 22.61760950088501,113.9637565612793 22.61788845062256,113.96416425704956 22.61808156967163,113.96450757980347 22.618703842163086,113.96444320678711 22.619197368621826,113.96450757980347 22.619261741638184,113.96470069885254 22.619304656982422,113.96493673324585 22.619798183441162,113.96491527557373 22.619798183441162,113.96519422531128 22.620227336883545,113.96607398986816 22.620935440063477,113.96688938140869 22.62136459350586,113.96755456924438 22.62138605117798,113.96806955337524 22.62181520462036,113.96843433380127 22.622394561767578,113.96860599517822 22.622759342193604,113.9691424369812 22.622780799865723,113.96920680999756 22.622652053833008,113.96948575973511 22.622673511505127,113.96952867507935 22.622759342193604,113.9698076248169 22.62260913848877,113.96997928619385 22.622652053833008,113.9702582359314 22.6228666305542,113.97064447402954 22.623145580291748,113.97109508514404 22.623488903045654,113.9715027809143 22.62361764907837,113.97195339202881 22.623746395111084,113.97244691848755 22.624003887176514,113.97291898727417 22.624239921569824,113.97349834442139 22.624282836914062,113.97367000579834 22.624261379241943,113.97401332855225 22.62430429458618,113.97435665130615 22.62434720993042,113.97510766983032 22.624390125274658,113.97585868835449 22.624433040618896,113.97663116455078 22.624475955963135,113.97673845291138 22.62456178665161,113.97671699523926 22.624711990356445,113.97656679153442 22.624948024749756,113.97669553756714 22.625184059143066,113.97688865661621 22.625527381896973,113.97718906402588 22.625548839569092,113.97748947143555 22.62563467025757,113.97772550582886 22.62580633163452,113.97890567779541 22.62632131576538,113.9795708656311 22.626643180847168,113.97995710372925 22.62681484222412,113.98036479949951 22.626986503601074,113.98036479949951 22.626965045928955,113.98015022277832 22.627394199371338,113.97974252700806 22.627201080322266,113.9792275428772 22.626986503601074,113.97854089736938 22.626686096191406,113.97787570953369 22.626407146453857,113.97744655609131 22.626214027404785,113.97671699523926 22.625913619995117,113.9766526222229 22.62580633163452,113.97671699523926 22.62561321258545,113.97660970687866 22.625420093536377,113.97648096084595 22.625184059143066,113.97635221481323 22.624905109405518,113.9765453338623 22.624647617340088,113.97600889205933 22.62462615966797,113.97540807723999 22.62458324432373,113.97472143173218 22.62456178665161,113.97405624389648 22.624518871307373,113.97375583648682 22.624454498291016,113.9735198020935 22.624454498291016,113.97289752960205 22.624433040618896,113.97246837615967 22.624218463897705,113.97186756134033 22.623918056488037,113.97120237350464 22.623746395111084,113.97094488143921 22.62361764907837,113.97073030471802 22.623467445373535,113.97021532058716 22.62305974960327,113.96987199783325 22.62282371520996,113.96965742111206 22.622909545898438,113.96965742111206 22.62305974960327,113.96929264068604 22.623231410980225,113.96854162216187 22.623252868652344,113.96817684173584 22.62312412261963,113.96800518035889 22.62258768081665,113.9676833152771 22.62209415435791,113.96721124649048 22.621707916259766,113.96658897399902 22.621665000915527,113.96615982055664 22.621707916259766,113.96588087081909 22.62157917022705,113.9655590057373 22.621407508850098,113.96487236022949 22.62089252471924,113.96448612213135 22.620506286621094,113.9642071723938 22.62007713317871,113.96371364593506 22.619433403015137,113.96373510360718 22.619025707244873,113.96377801895142 22.61887550354004,113.96360635757446 22.618532180786133,113.9628553390503 22.618231773376465,113.96231889724731 22.617995738983154,113.96169662475586 22.617802619934082,113.9626407623291 22.6168155670166,113.96268367767334 22.616794109344482)"
        if (wktString) {
            geo = wktString
        }
        $.ajax(
            {
                url: "http://10.253.102.69/gw/BUILDING/shenzhenS/LOU", //服务接口Api地址
                type: "post",
                headers: {
                    "szvsud-license-key": "hr1YyKPrT4flH2/agLETtvp3oDZ54Yt+OM29Apk6LyTZrwmVds9qqU+4HoWj8SUI"
                }, //在header中添加key
                dateType: "json",
                contentType: 'application/json',
                data: JSON.stringify({
                    /* "operation": "list",
                     "geo": wktString,
                     "pageNum": 1,
                     "pageSize": 99999*/
                    "operation": "list",
                    "geo": geo,
                    "pageNum": 1,
                    "pageSize": 99999
                }),
                success: function (data) {
                    var format = new ol.format.GeoJSON();
                    var vectorLayer = new ol.layer.Vector({
                        source: new ol.source.Vector()
                    });
                    let features = []
                    data.dataList.forEach((item) => {
                        var geomObj = JSON.parse(item.location);
                        var geometry = format.readGeometry(geomObj);
                        var feature = new ol.Feature(geometry)
                        feature.setProperties({
                            id: item.id,
                            basicId: item.basicId,
                            name: item.name,
                            type: item.type,
                        });
                        features.push(feature)
                    })
                    vectorLayer.getSource().addFeatures(features);
                    vectorLayer.set('id', key)
                    map.addLayer(vectorLayer);
                },
                error: function (data) {
                }
            }
        );
    }
    function onPickupClear() {
        $('#pointX')[0].value = '';
        $('#pointY')[0].value = '';
        $('#tool-PickBox')[0].style.display = 'none'
        ol.Observable.unByKey(pickClick);
        if (pickLayer) {
            map.removeLayer(pickLayer)
        }
    }

    // 加载图层 WMTS
    function addWMTSLayer(key, params) {
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === 'baseLayer') {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }

        var resolutionL = [
            0.0054870036688934128,
            0.0027435018344467064,
            0.0013717509172233532,
            0.0006858754586116766,
            0.0003429377293058383,
            0.00017146886465291915,
            0.00008573443232645957,
            0.00004286721616322979,
            0.000021433608081614893,
            0.000010716804040807447,
            0.000005358402020403723,
            0.0000026792010102018617,
            0.0000013396005051009308
        ]
        var views = new ol.View({
            projection: projection, //坐标系参数如果不设置，则默认为墨卡托
            resolutions: resolutionL, //分辨率层级数组
            center: [114.139825956825, 22.6513875967627],
            zoom: 1,
            maxZoom: 20
        })
        map.setView(views)

        var matrixIdsL = []
        for (var z = 0; z < resolutionL.length; ++z) {
            matrixIdsL[z] = z
        }
        console.log('%c  1- addWMTSLayer: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;', resolutionL,matrixIdsL);

        var layer = new ol.layer.Tile({
            source: new ol.source.WMTS({
                url: params.url,
                layer: params.layer,
                matrixSet: params.matrixSet,
                format: 'image/png',
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-180, 90],
                    tileSize: 256,
                    resolutions: resolutionL,
                    matrixIds: matrixIdsL
                }),
                style: 'default'
            })
        })
        layer.set('id', 'baseLayer')
        map.addLayer(layer)
        layer.setZIndex(0)
    }


    function addWMTSLayer2(key, params) {
        let layers = map.getLayers().getArray()
        let findLayer = null
        for (let each of layers) {
            if (each.getProperties()['id'] === 'baseLayer') {
                findLayer = each
            }
        }
        if (findLayer) {
            map.removeLayer(findLayer)
        }

        var resolutionL = []
        var matrixIdsL = []
        for (var z = 0; z < 18; ++z) {
            var res = 360 / 512
            resolutionL[z] = res / Math.pow(2, z);
            matrixIdsL[z] = z;
        }

        console.log('%c  2- addWMTSLayer2: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;', resolutionL,matrixIdsL);

        var layer = new ol.layer.Tile({
            source: new ol.source.WMTS({
                url: params.url,
                layer: params.layer,
                matrixSet: params.matrixSet,
                format: 'image/png',
                tileGrid: new ol.tilegrid.WMTS({
                    extent: [-180, -90, 180, 90],
                    origin: [-180, 90],
                    resolutions: resolutionL,
                    matrixIds: matrixIdsL
                }),
                style: 'default'
            })
        })
        layer.set('id', 'baseLayer')
        map.addLayer(layer)
        layer.setZIndex(0)
    }

    function handleSwitchPanel(index) {
        var btnList = $('#btnClick')[0].getElementsByTagName('button')
        for (var i = 0; i < btnList.length; i++) {
            var name = btnList[i].name
            if (i !== index || $('#' + name)[0].style.display === 'block') {
                $('#' + name)[0].style.display = 'none'
                btnList[i].style.color = '#000'
            } else {
                $('#' + name)[0].style.display = 'block'
                btnList[i].style.color = '#3C8DBC'
            }
        }
        if (btnList[index].name === 'tool-PickBox') {
            onClickPickup()
        } else {
            onPickupClear()
        }
    }

    //监听浏览器宽度的改变
    window.onresize = function () {
        changeMargin();
    };

    function changeMargin() {
        var docWidth = document.body.clientWidth;
        if (docWidth <= 1920 && docWidth > 768) {
            $('#layer-panel')[0].style.display = 'block'
            $('#search-panel')[0].style.display = 'block'
        } else {
            var btnList = $('#btnClick')[0].getElementsByTagName('button')
            for (var i = 0; i < btnList.length; i++) {
                var name = btnList[i].name
                $('#' + name)[0].style.display = 'none'
                btnList[i].style.color = '#000'
                if (name === 'tool-PickBox') {
                    onPickupClear()
                }
            }
        }
    }
</script>
</body>
</html>

